// 浮动块布局
<template>

<div>
<div class="flow-block" :style='layout'>
    
    <div class="block num_1">block_1</div>
    <div class="block num_2" :style='item'>block_2</div>
    <div class="block num_3">block_3</div>
    <div class="block num_4">block_4</div>
    <div class="block num_5">block_5</div>
    <div class="block num_6">block_6</div>
    <div class="block num_7">block_7</div>
    <div class="block num_8">block_8</div>
    <div class="block num_9">block_9</div>

</div>
    <Button @click='change'>change</Button>
</div>



</template>

<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
import layout from './layout.vue';

@Component
export default class flowBlock extends Vue{

    name:string = 'flow_block'


    layout:any = {}
    item:any = {}

    change(){

        this.layout = {
            'grid-template-areas': ' "num_3 num_2 num_1" "num_9 num_8 num_7 " "num_6 num_5 num_4" ',
             color: '#fff',
             width: '500px',
             height: '500px',
             background: '#4885ff'
        };

    }

}


</script>

<style scoped lang='scss'>

.flow-block{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;

    display: grid;
    grid-template-columns: repeat(3 1fr);
    grid-template-rows: repeat(3 1fr);
    grid-template-areas:"num_3 num_2 num_1" "num_6 num_5 num_4"   "num_9 num_8 num_7 " ;
    grid-column-gap: _rem(10px);
    grid-row-gap: _rem(10px);
    grid-auto-flow: row;
    
    
    margin: auto;
    width: _rem(300px);
    height: _rem(300px);
    background: #eee;

    transition: all .5s;
}

.block{
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    transition: all .5s;

    text-align: center;
    line-height: _rem(100px);
    color: #fff;

   
}


@for $num from 1 through 9{
    .num_#{$num}{

        // grid-area: num_#{$num};
        background: #111111*$num;
        &:hover{
            border-radius: _rem(100px);
            z-index: 100;
        }
    }
}

.num_3{
    grid-column: 1/2;
    grid-row: 1/2;
    z-index: 99;
}

.num_2{
    grid-row: 3 / 3;
    z-index: 99;

    transition:  all .5s;
}

</style>

